<template>
  <!-- 白色圆角背景板 -->
  <div class="cards">

    <!-- 轮播图 -->
    <div class="my_carousel">
      <el-carousel :interval="5000" type="card" height="250px" style="width: 78%; margin: auto;">
        <el-carousel-item v-for="item in carousel_pics" :key="item">
          <img :src="item.pic" alt="carousel">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 活动公告内容 -->
    <p style="font-size: 18px; font-weight: 600;">
      活动公告
      <el-icon>
        <ArrowRight />
      </el-icon>
    </p>
    <div class="activity-list">

      <!-- 加载骨架 -->
      <el-skeleton style="margin-top: 50px;" v-if="loading && activityList.length <= 0" :rows="5" animated />

      <div v-for="item in activityList" :key="item.storeId" style="margin-top: 20px;">
        <!-- 单个卡片 -->
        <el-card :body-style="{ display: 'flex', 'justify-content': 'space-between' }" shadow="hover"
          style="background: #ffce9a23;">
          <div>
            <font-awesome-icon :icon="['fas', 'fire']" />
            <span class="activity-name">{{ item.activityName }}</span>
            <span>
              ——
              活动商品满
              <span class="activity-number">{{ item.reach.toFixed(2) }}</span>
              元，立减
              <span class="activity-number">{{ item.reduce.toFixed(2) }}</span>
              元
            </span>
          </div>
          <el-button icon="Link" link class="button" @click="enterActivity(item)">查看活动详情</el-button>
        </el-card>
      </div>

    </div>

  </div>

  <div class="cards" style="padding-top: 40px;">

    <!-- 推荐商店内容 -->
    <p style="font-size: 18px; font-weight: 600;">
      推荐商店
      <el-icon>
        <ArrowRight />
      </el-icon>
    </p>
    <el-row :gutter="20" class="store-list">

      <!-- 加载骨架 -->
      <el-skeleton style="margin: 50px 10px 0 10px;" v-if="loading && storeVoList.length <= 0" :rows="5" animated />

      <el-col v-for="item in storeVoList" :key="item.storeId" :span="8" style="margin-top: 20px;">

        <!-- 单个卡片 -->
        <el-card :body-style="{ display: 'flex', padding: '0px' }" shadow="hover">
          <img :src="img_url_pre(item.pictures[0])" class="image" @dragstart.prevent />
          <div class="left-part">
            <!-- 商店名 -->
            <span class="store-name">
              {{ item.storeName }}
              <br>
              <!-- 商店标签 -->
              <el-tag class="store-tag">
                {{ item.category[0] }}
              </el-tag>
            </span>
            <!-- 进入商店按钮 -->
            <el-button icon="Link" link class="button" @click="enterStore(item.storeId)">进入店铺</el-button>
          </div>
        </el-card>

      </el-col>
    </el-row>

    <!-- 推荐商品内容 -->
    <p style="font-size: 18px; font-weight: 600;">
      推荐商品
      <el-icon>
        <ArrowRight />
      </el-icon>
    </p>
    <el-row :gutter="20" class="commodity-list">

      <!-- 加载骨架 -->
      <el-skeleton style="margin: 50px 10px 0 10px;" v-if="loading && commodityList.length <= 0" :rows="5" animated />

      <el-col v-for="item in commodityList" :key="item.commodityId" :span="8" style="margin-top: 20px;">

        <!-- 单个卡片 -->
        <el-card :body-style="{ display: 'flex', padding: '0px' }" shadow="hover">
          <img :src="img_url_pre(item.pictures[0])" class="image" @dragstart.prevent />
          <div class="left-part">
            <!-- 商品名 -->
            <div>
              {{ item.commodityName }}
            </div>
            <!-- 商品价格 -->
            <div class="price">
              <span style="font-size: 20px;">￥{{ item.price.toFixed(2) }}</span>
              <el-tag effect="dark" type="warning" size="small">包邮</el-tag>
            </div>
            <!-- 销量 -->
            <div class="sales-volume">
              {{ item.salesVolume }}+人已付款
            </div>
            <!-- 进入商店按钮 -->
            <el-button icon="Opportunity" link class="button" @click="enterCommodity(item.commodityId)">查看商品详情
            </el-button>
          </div>
        </el-card>

      </el-col>

    </el-row>

  </div>
</template>


<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import img_url_pre from '../../utils/img_url_filter';

const carousel_pics = [
  { pic: new URL('../../assets/images/mall_index_carousel1.jpg', import.meta.url).href },
  { pic: new URL('../../assets/images/mall_index_carousel2.jpg', import.meta.url).href },
  { pic: new URL('../../assets/images/mall_index_carousel3.jpg', import.meta.url).href },
  { pic: new URL('../../assets/images/mall_index_carousel4.jpg', import.meta.url).href },
  { pic: new URL('../../assets/images/mall_index_carousel5.jpg', import.meta.url).href },
]

const router = useRouter();
const store = useStore();
const { proxy } = getCurrentInstance();
const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})
const storeVoList = ref([]);
const activityList = ref([]);
const commodityList = ref([]);
const loading = ref(false);

/**
 * 获取商店Vo列表
 */
const getStoreVoList = async () => {
  let res = await proxy.$api.store.getStoreVoList({ current: config.current, size: config.size });
  storeVoList.value = res.data.storeVoList;
  // config.total = res.data.total
};

/**
 * 获取所有正在进行的活动
 */
const getOngoingActivity = async () => {
  let res = await proxy.$api.activity.getPageOfOngoingActivity({ current: config.current, size: config.size });
  activityList.value = res.data.activityList;
  // config.total = res.data.total
}

/**
 * 获取商品
 */
const getCommodity = async () => {
  let res = await proxy.$api.commodity.getCommodityList({ current: config.current, size: config.size });
  commodityList.value = res.data.commodityList;
  // config.total = res.data.total
}

// 点击进入商店
const enterStore = (storeId) => {
  store.commit('store/updateStoreId', storeId);
  // 滚动到顶部
  if (store.state.MallMainScrollBarRef) {
    store.state.MallMainScrollBarRef.setScrollTop(0);
  }
  router.push('/mall/store');
}

/**
 * 进入活动详情页面
 * @param {object} activity 活动对象
 */
const enterActivity = (activity) => {
  store.commit('activity/updateActivityId', activity.activityId);
  // 滚动到顶部
  if (store.state.MallMainScrollBarRef) {
    store.state.MallMainScrollBarRef.setScrollTop(0);
  }
  router.push('/mall/activity')
}

/**
 * 进入查看商品详情
 */
const enterCommodity = (commodityId) => {
  store.commit('commodity/updateCommodityId', commodityId);
  // 滚动到顶部
  if (store.state.MallMainScrollBarRef) {
    store.state.MallMainScrollBarRef.setScrollTop(0);
  }
  router.push('/mall/commodity')
}

onMounted(async () => {
  loading.value = true;
  await getOngoingActivity();
  await getStoreVoList();
  await getCommodity();
  loading.value = false;
})
</script>

<style lang="less" scoped>
/* 店铺卡片群 */
.cards {
  background-color: white;
  width: 73%;
  margin: 20px auto 20px auto;
  padding: 0 40px 30px 40px;
  border-radius: 20px;

  .my_carousel {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 20px;

    .el-carousel__item {
      /* 为轮播图卡片设置圆角 */
      border-radius: 5px;
      border: 1.5px solid #8a8d8f50;

      h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  p {
    margin-left: 30px;
    /* 让icon和文字在水平轴线上 */
    display: flex;
  }

  .activity-list {

    .activity-name {
      margin-left: 5px;
      font-weight: 600;
      font-size: 17px;
      margin-bottom: 10px;
    }

    .activity-number {
      font-size: 23px;
      color: #2e64c2;
    }
  }

  .store-list {
    margin-bottom: 60px;

    .el-card:hover {
      /* hover的时候产生阴影和变大 */
      transform: scale(1.015);
      box-shadow: 0 0 16px rgba(113, 138, 187, 0.523);
      border-color: #eee;
      // transition: all 0.2s ease-in-out;
    }

    .el-card {
      border: 0;
      border-radius: 15px;
      background-color: #d3dae33a;
      padding-right: 11px;

      .image {
        width: 43%;
        height: 150px;
        margin: 14px 14px 14px 14px;
        border-radius: 6px;
      }

      .left-part {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .store-name {
          .store-tag {
            margin-top: 10px;
          }
        }

        .button {
          display: flex;
          width: 100px;
        }
      }
    }
  }

  .commodity-list {

    .el-card:hover {
      /* hover的时候产生阴影和变大 */
      transform: scale(1.015);
      box-shadow: 0 0 16px rgba(113, 138, 187, 0.523);
      border-color: #eee;
    }

    .el-card {
      border: 0;
      border-radius: 15px;
      background-color: #d3dae33a;
      padding-right: 11px;

      .image {
        width: 43%;
        height: 150px;
        margin: 14px 14px 14px 14px;
        border-radius: 6px;
      }

      .left-part {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .price {
          display: flex;

          .el-tag {
            margin-left: 5px;
          }
        }

        .sales-volume {
          font-size: 13px;
          color: #A2A2A2;
          margin-left: 5px;
        }

        .button {
          display: flex;
          width: 100px;
        }
      }
    }
  }
}
</style>